<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 展示图片 -->
    <!-- src:指定路径(url) 其请求的是外部文件 所以要发送请求 -->
    <img src="" alt="" id="selectedImg"><br>
    <!-- 需求 即时预览 -->
    <!-- 即时：当用户选择完图片后立即进行预览的处理
         预览：通过文件读取对象的readAsDataURL()完成 -->
    <form action="">
        文件：<input type="file" name="file" id="file" onchange="showPicture()"><br>
        <input type="submit" name="" id="" value="提交">
    </form>
    <script>
        // FileReader：读取文件内容
        /*
        * 1. readAsText():读取文本文件(可以使用TXT打开的文件)，返回文件字符串，默认编码UTF-8
        * 2. readAsBinaryString():读取任何类型的文件 返回二进制字符串 这个是用来存储文件的
        *    例如:读取文件的内容 获取二进制数据 传递给后台 后台接到数据之后 存储数据
        * 3. readAsDataURL():读取文件获取一段已data开头的字符串 这段字符串的本质就是 DataURL
        *    DataURL是一种将文件(一般是图像)嵌入到文档的方案
        *    DataURL是将资源转换为base64编码的字符串，并且直接将其存储在url中>>提高网站的加载速度和执行效率
        * abort() 中断读取   
        */
        function showPicture(){
            // 1. 创建文件读取对象
            var reader = new FileReader();
            /* 2. 读取文件 获得DataURL
                  2.1 没有任何的返回值:void   但是会把结果放在对象的result中
                  2.2 需要传递一个参数（二进制大文件）*/ 
            // 返回文件数组 只要第一个
            var file = document.querySelector("#file").files[0];
            // 读取需要时间
            reader.readAsDataURL(file);
            /* FileReader提供了 获得读取文件时状态的函数
                onabort 读取文件中断时触发
                onerror 读取文件错误是触发
                onload  读取文件成功是触发
                onloadend 读取文件完成触发 无论失败成功
                onloadstart 开始读取文件时触发
                onprogress 读取文件过程中触发
            */
            reader.onload= function(){
                // 拿到二进制数据后 展示给用户
                console.log(reader.result);
                document.querySelector("#selectedImg").src=reader.result;
            }
        };
    </script>
</body>
</html>